<template>
  <div
    id="libsearchbox"
    class="bc2 selector-text float-left h50p border-none sc-display pd020p white pr"
    @click="fnSearchShow"
  >
    <span class="fs20 ls2 fw500">{{ state.text }}</span>
    <span class="st-xx"></span>
    <div class="search w100 border-none bc3" v-show="state.search">
      <input
        type="text"
        class="border-none"
        v-model="state.serarchInput"
        @keyup.enter="fnGetLibList"
      />
      <ul class="lsnone pbm0 w100">
        <li
          v-for="(item, index) in state.searchList"
          :key="index"
          class="search-li lsnone pbm0 w100 sc-display"
          @click="fnChangeLib(item)"
        >
          <span class="fs16">{{ item.title }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { reactive, watch } from "vue";
import { post_ } from "../../../http/api.js";
import { useRouter } from "vue-router";

export default {
  // 父组件传值
  props: {
    msg: Object,
  },
  // 父组件时间
  emits: ["lib-change"],
  // 钩子
  setup(props, { emit }) {
    // 路由跳转
    const { push } = useRouter();
    // 双向绑定数据
    const state = reactive({
      text: props.msg.text,
      search: false,
      serachStatus: 1, // 中间状态 1-初始，2-搜索后点击
      serarchInput: "",
      searchList: [{ title: "请输入搜索", id: 0 }],
    });
    // 监听
    watch(
      () => state.serarchInput,
      (newVal) => {
        console.log(newVal);
      }
    );
    // 搜索
    const fnGetLibList = () => {
      post_("api/pub/getLib", {
        id: 0,
        title: state.serarchInput,
        describe: "",
      }).then((res) => {
        state.searchList = res;
      });
    };
    // 搜索框点击回调
    const clickEventShow = (event) => {
      let lsb = document.getElementById("libsearchbox");
      if (!lsb.contains(event.target) || state.serachStatus === 2) {
        state.search = false;
        document.body.removeEventListener("click", clickEventShow);
        state.serachStatus = 1;
      }
    };
    // 搜索框点击事件
    const fnSearchShow = (event) => {
      if (state.serachStatus === 1) state.search = true;
      document.body.addEventListener("click", clickEventShow);
    };
    // lib change
    const fnChangeLib = (val) => {
      emit("lib-change", val.id);
      state.serachStatus = 2;
      state.text = val.title;
    };
    // 传入模板
    return {
      state,
      fnGetLibList,
      clickEventShow,
      fnSearchShow,
      fnChangeLib,
    };
  },
};
</script>

<style scoped>
.selector-text {
  border: 1px solid rgb(255, 255, 255);
  border-radius: 10px;
}
.selector-text:hover {
  border: 1px solid rgb(230, 230, 230);
  color: rgb(230, 230, 230);
  cursor: pointer;
}
.st-xx {
  margin-left: 10px;
  width: 0;
  height: 0;
  border-top: 7px solid rgb(255, 255, 255);
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
}
.selector-text:hover .st-xx {
  border-top: 7px solid rgb(230, 230, 230);
}

.search {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px;
  border-radius: 10px;
}

.search input {
  width: 100%;
  height: 30px;
}

.search-li {
  height: 30px;
}
</style>
